<template>
	<div class="changebox">
			<el-row>
				<el-tabs type="border-card">
					<el-tab-pane label="员工调职">
						<el-table :data="emps" >
							<el-table-column prop="eid" label="id"></el-table-column>
							<el-table-column prop="ename" label="姓名"></el-table-column>
							<el-table-column prop="sex" label="性别">
								<template slot-scope="scope">
									<i v-if="scope.row.sex==0">男</i>
									<i v-else-if="scope.row.sex==1">女</i>
								</template>
							</el-table-column>
							<el-table-column prop="power" label="权限"></el-table-column>
							<el-table-column label="操作">
								<template slot-scope="s">
						<!-- 利用作用域插槽，将当前行作为参数传给了方法del -->
						<!-- s.$index可以获取当前行数据的索引 -->
									<el-button type="success" @click="givepower(s.$index,s.row)">更改权限</el-button>
								</template>
							</el-table-column>
						</el-table>
		
						<el-dialog title="员工更改权限" :visible.sync="dialogFormVisiblep">
							<el-form :model="form" label-width="100px">
								<el-form-item label="姓名:">
									<el-input v-model="form.ename" autocoplete="off" disabled></el-input>
								</el-form-item>
								<el-form-item label="新的权限:">
									<el-select v-model="pickright" placeholder="请选择" style="float:left" @change="checkpick">
										<el-option
										  v-for="item in rights"
										  :key="item.rid"
										  :label="item.rname"
										  :value="item.rid">
										</el-option>
									</el-select>
								</el-form-item>
								<el-form-item>
									<el-input v-model="form.sex" autocoplete="off" type="hidden"></el-input>
									<el-input v-model="form.eid" autocoplete="off" type="hidden"></el-input>
								</el-form-item>
								<el-button type="primary" @click="sureGive" :disabled="disable">确 定</el-button>
							</el-form>
						</el-dialog>
					</el-tab-pane>
				</el-tabs>
			</el-row>
		</div>
	</template>
	
	<script>
		export default {
			data() {
				return {
					me:this.$parent.$parent.$parent.$parent.emp,
					emps:[],
					rights:[],
					pickright:'',
					pickpower:'',
					dialogFormVisiblep:false,
					form:{
							eid:0,
							ename:'',	
							power:'',
							sex:'',
					},
					disable:true,
					myindex:-1,
					value: '',
				}
			},
			created(){
				this.$axios.post("emphasright?deptno="+this.me.deptno+"").then(v=>{
					console.log(v)
					if(v.data){
						this.emps=v.data;
					}else{
						alert("出错了！！");
					}
				}).catch(ex=>{
					alert("出错了！"+ex);
				})
			},
			methods:{
				givepower(index,row){
					this.dialogFormVisiblep=true;
					this.form={
						eid:row.eid,
						ename:row.ename,
						sex:row.sex,
						power:this.pickpower,
					};
					this.$axios.post("rightempno?deptno="+this.me.deptno+"&eid="+row.eid+"").then(v=>{
						console.log(v)
						if(v.data){
							this.rights=v.data;
						}else{
							alert("出错了！！");
						}
					}).catch(ex=>{
						alert("出错了！"+ex);
					})
					
					this.myindex=index;
				},
				
				sureGive:function(){
					this.$axios.post("changeright?eid="+this.form.eid+"&rid="+this.pickright+"&deptno="+this.me.deptno+"").then(v=>{
						console.log(v)
						if(v.data){
								this.pickpower=v.data.power;
								alert("更改权限成功！！");
						}else{
							alert("出错了！！");
						}
					}).catch(ex=>{
						alert("出错了！"+ex);
					});
					this.emps.splice(this.myindex,1,this.form);
					this.form={
						eid:0,
						ename:'',	
						power:'',
						sex:'',
					}
					this.pickright='',
					this.dialogFormVisiblep=false;
				},
				checkpick(){
					if(this.pickright==''){
						this.disable=true;
					}else{
						this.disable=false;
						}
				},
			}
		}
	</script>
	
	<style>
	
	</style>
	